import Page from "@/components/page"
import UiButton from "@/components/ui/UiButton"
import { ShopFields } from "@/interfaces/ShopEntity"
import { gql, useQuery } from "@apollo/client"
import moment from "moment"
import { useMemo } from "react"


const GetSelfResOrderQuery = gql`
    query GetSelfResOrder{
        getSelfResOrder{
            id
            createAt
            updateAt
            total
            count
            money
            shopId
            shop{
                ${ShopFields}
            }
            
        }
    }
`
const UserMinePage = () => {
    const { data, refetch } = useQuery(GetSelfResOrderQuery)
    const list: any[] = useMemo(() => data?.getSelfResOrder || [], [data]);
    return (
        <Page>
            <div className="card m-2 bg-base-100 shadow-xl">
                <table className="table text-center">
                    <thead>
                        <tr>
                            <th><UiButton onClick={() => refetch()}>刷新</UiButton></th>
                            <th>创建时间</th>
                            <td>商家名称</td>
                            <th>数量</th>
                            <th>配送费</th>
                            <th>总金额</th>
                        </tr>
                    </thead>
                    <tbody>
                        {list.map(({ id, total, createAt, shop: { name }, money, count }: any) => (
                            <tr key={id}>
                                <td>{id}1</td>
                                <td>{moment(createAt).format("YYYY-MM-DD")}</td>
                                <td>{name}</td>
                                <td>{count}</td>
                                <td>{money / 100}</td>
                                <td>{total / 100}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </Page>
    )
}
export default UserMinePage